<template>
  <el-container>
    <el-aside width="200px" style="border-right: 1px solid #d2d6de;border-left:none;">
      <div style="padding-top:5px;padding-left:5px;">
        <i class="el-icon-menu"></i>
        <span style="padding-left:3px;">组织机构</span>
      </div>
      <tree
        style="padding-left: 0px;padding-top: 10px;"
        :nodes="nodes"
        :setting="setting"
        @onCreated="handleCreated"
      />
    </el-aside>
    <el-main>
      <el-form size="mini" :model="searchForm" ref="form" label-width="80px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="名称">
              <el-input v-model="searchForm.depaName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="电话">
              <el-input v-model="searchForm.deptPhone"></el-input>
            </el-form-item>
          </el-col>
          <el-button style="margin-left:20px;" size="mini" type="primary" icon="el-
icon-search">查询</el-button>
          <el-button size="mini" type="primary" icon="el-icon-plus" @click="addDept">新增</el-button>
        </el-row>
      </el-form>
      <el-table size="mini" :data="tableData" :height="tableHeight" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
      ></el-pagination>
    </el-main>
    <!--新增部门弹框-->
    <el-dialog :title="deptDialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form size="mini" :model="addForm" ref="addForm" label-width="80px">
        <el-form-item label="上级部门">
          <el-input v-model="addForm.parentName"></el-input>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="部门编码">
          <el-input v-model="addForm.deptCode"></el-input>
        </el-form-item>
        <el-form-item label="部门电话">
          <el-input v-model="addForm.deptPhone"></el-input>
        </el-form-item>
        <el-form-item label="部门地址">
          <el-input v-model="addForm.deptAddress"></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input-number v-model="addForm.orderNum" placeholder></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>


<script>
import tree from "vue-giant-tree";
export default {
  name: "departmentList",
  components: {
    tree
  },
  //计算表格高度
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 230; //后面的50：根据需求空出的高度，自行调整;
    });
  },
  data() {
    return {
      //当前页树
      currentPage: 1,
      //表格高度
      tableHeight: 0,
      //搜索数据绑定
      searchForm: {
        depaName: "",
        deptPhone: ""
      },
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        // 第17讲 机构管理组织树讲解
        // 1.1、界面布局：
        // 采用左右布局方式，左侧放ztree树，右侧放部门列表
        // 1.2、左侧部门树配置
        // 1.2.1、引入ztree组件 import tree from "vue-giant-tree";
        // 1.2.2、注册组件
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],

      //树插件配置
      ztreeObj: null,
      setting: {
        view: {
          showLine: true,
          showIcon: false,
          fontCss: { "font-size": "12px", color: "#333" }
        },
        //设置这里会显示复选框
        // check: {
        // enable: true
        // },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: "0"
          }
        },
        callback: {
          onClick: this.ztreeOnClick
        }
      },
      nodes: [
        {
          id: "1000000362292826",
          pid: "1000001251633881",
          likeId: "0,100000177618509910000012516338811000000362292826",
          parentName: "销售部门",
          manager: null,
          name: "销售1",
          deptCode: "",
          deptAddress: "",
          deptPhone: "",
          orderNum: 0
        },
        {
          id: "1000001251633881",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000001251633881",
          parentName: "秘咖科技有限公司",
          manager: null,
          name: "销售部门",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null
        },
        {
          id: "1000001341234088",
          pid: "1000001776185099",
          likeId: "0,1000001776185099",
          parentName: "秘咖网络科技有限公司",
          manager: null,
          name: "人才管理部1",
          deptCode: "RCGL",
          deptAddress: "",
          deptPhone: "",
          orderNum: 0
        },
        {
          id: "1000001620535597",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000001620535597",
          parentName: "秘咖网络科技有限公司",
          manager: null,
          name: "软件研发部",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null
        },
        {
          id: "1000001776185099",
          pid: "0",
          likeId: "0,1000001776185099",
          parentName: "顶级部门",
          manager: null,
          name: "秘咖网络科技有限公司",
          deptCode: null,
          deptAddress: null,
          deptPhone: null,
          orderNum: null
        },
        {
          id: "1000002097176073",
          pid: "1000001776185099",
          likeId: "0,10000017761850991000002097176073",
          parentName: "秘咖网络科技有限公司",
          manager: "464156",
          name: "售后服务部",
          deptCode: "SHFWB",
          deptAddress: "昆明",
          deptPhone: "18687171906",
          orderNum: null
        }
      ],

      //新增部门数据绑定
      addForm: {
        id: "",
        pid: "",
        parentName: "",
        name: "",
        deptCode: "",
        deptPhone: "",
        deptAddress: "",
        orderNum: ""
      }
    };
  },
  methods: {
    handleCreated: function(ztreeObj) {
      this.ztreeObj = ztreeObj;
      let firstTree = this.ztreeObj.getNodes()[0];
      //默认选中第一个
      this.ztreeObj.selectNode(firstTree);
      //设置节点全部展开
      ztreeObj.expandAll(true);
      //加载完自动点击第一个，加载右边表格
      if (firstTree) {
        //此处需要判断，否则会报错
        this.setting.callback.onClick(null, firstTree.id, firstTree);
      }
    },
    // 树点击事件
    ztreeOnClick: function(evt, treeId, treeNode) {
      console.log(treeNode);
      //此处根据点中部门树id查询下级部门
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //新增部门
    addDept() {
      this.deptDialogTitle = "新增部门";
      this.dialogVisible = true;
    }
  }
};
</script>

<style scoped>
.my-button {
  font-size: 20px;
  border-radius: 10%;
}
.el-dialog__wrapper /deep/ .el-dialog__body {
  padding-top: 5px !important;
}
</style>
